<template>
  <div class="wp-box">
    <!-- <div class="box" v-for="(item,index) in dataList" :key="index">
        <div class="title">
            <span>{{item.title}}</span>
        </div>
        <fromSelect :title="title" :optionList="optionList" :types="sele" @val="seleVal" @click="seleTypes(index)"></fromSelect>
        <fromSelect :title="titleSystem" :optionList="optionListSystem" :types="sele"></fromSelect>
        <fromSelect :title="titleModel" :optionList="optionListModel" :types="sele"></fromSelect>
        <fromSelect :title="titleWeight" :types="inp"></fromSelect>
        <div class="bottomBox">
            <div class="bottom-left">
                内容:
            </div>
           <div class="bottom-right">
           <select class="bottom-select" @click="openModel(index)">
               <option v-for="(item,index) in optionListCont" :key="index">{{item.name}}</option>
           </select>
            </div>
            <div class="btm-btn">
                <button class="btm-btn-left">智能生成</button>
                <button class="btm-btn-right">重置</button>
            </div>
        </div>
    </div> -->
    <div class="box" v-if="HideValues">
      <div class="title">
        <span>{{ contentList[0].Title }}</span>
        <img
          src="@/assets/img/product/ic_del.png"
          class="img-del"
          @click="deleBtn(1)"
        />
      </div>
      <div class="content">
        <div class="list-left">模块:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[0].Section"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">系统:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[0].System"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">型号:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[0].Type"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">权重:</div>
        <div class="list-right">
          <input
            type="number"
            class="list-inp"
            v-model="contentList[0].Weight"
          />
        </div>
      </div>
      <div class="bottomBox">
        <div class="bottom-left">内容:</div>
        <div class="bottom-right">
          <!-- <button class="SetUpBtn" @click="ShowModel(1)" v-if="Completed">
            未设置
          </button> -->
          <button class="ComBtn" @click="ShowModel(1)" v-if="Completed">
            未设置
          </button>
          <button class="ComBtn" @click="ShowModel(1)" v-else>已设置</button>
        </div>
        <div class="btm-btn">
          <button class="btm-btn-left" @click="random(1)">智能生成</button>
          <button class="btm-btn-right" @click="Reset(1)">重置</button>
        </div>
      </div>
    </div>
    <div class="box" v-if="HideValues2">
      <div class="title">
        <span>{{ contentList[1].Title }}</span>
        <img
          src="@/assets/img/product/ic_del.png"
          class="img-del"
          @click="deleBtn(2)"
        />
      </div>
      <div class="content">
        <div class="list-left">模块:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[1].Section"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">系统:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[1].System"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">型号:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[1].Type"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">权重:</div>
        <div class="list-right">
          <input
            type="number"
            class="list-inp"
            v-model="contentList[1].Weight"
          />
        </div>
      </div>
      <div class="bottomBox">
        <div class="bottom-left">内容:</div>
        <div class="bottom-right">
          <!-- <button class="SetUpBtn" @click="ShowModel(2)" v-if="CompletedTwo">
            未设置
          </button> -->
          <button class="ComBtn" @click="ShowModel(2)" v-if="CompletedTwo">
            未设置
          </button>
          <button class="ComBtn" @click="ShowModel(2)" v-else>已设置</button>
        </div>
        <div class="btm-btn">
          <button class="btm-btn-left" @click="random(2)">智能生成</button>
          <button class="btm-btn-right" @click="Reset(2)">重置</button>
        </div>
      </div>
    </div>
    <div class="box" v-if="HideValues3">
      <div class="title">
        <span>项目一</span>
        <img
          src="@/assets/img/product/ic_del.png"
          class="img-del"
          @click="deleBtn(3)"
        />
      </div>
      <div class="content">
        <div class="list-left">模块:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[2].Section"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">系统:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[2].System"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">型号:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[2].Type"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">权重:</div>
        <div class="list-right">
          <input
            type="number"
            class="list-inp"
            v-model="contentList[2].Weight"
          />
        </div>
      </div>
      <div class="bottomBox">
        <div class="bottom-left">内容:</div>
        <div class="bottom-right">
          <!-- <button class="SetUpBtn" @click="ShowModel(3)" v-if="CompletedThree">
            未设置
          </button> -->
          <button class="ComBtn" @click="ShowModel(3)" v-if="CompletedThree">
            未设置
          </button>
          <button class="ComBtn" @click="ShowModel(3)" v-else>已设置</button>
        </div>
        <div class="btm-btn">
          <!-- <button class="btm-btn-left" @click="random(3)">智能生成</button> -->
          <button class="btm-btn-right" @click="Reset(3)">重置</button>
        </div>
      </div>
    </div>
    <div class="box" v-if="HideValues4">
      <div class="title">
        <span>项目二</span>
        <img
          src="@/assets/img/product/ic_del.png"
          class="img-del"
          @click="deleBtn(4)"
        />
      </div>
      <div class="content">
        <div class="list-left">模块:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[3].Section"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">系统:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[3].System"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">型号:</div>
        <div class="list-right">
          <input
            type="text"
            class="list-inp"
            readOnly="true"
            v-model="contentList[3].Type"
          />
        </div>
      </div>
      <div class="content">
        <div class="list-left">权重:</div>
        <div class="list-right">
          <input
            type="number"
            class="list-inp"
            v-model="contentList[3].Weight"
          />
        </div>
      </div>
      <div class="bottomBox">
        <div class="bottom-left">内容:</div>
        <div class="bottom-right">
          <!-- <button class="SetUpBtn" @click="ShowModel(4)" v-if="CompletedFour">
            未设置
          </button> -->
          <button class="ComBtn" @click="ShowModel(4)" v-if="CompletedFour">
            未设置
          </button>
          <button class="ComBtn" @click="ShowModel(4)" v-else>已设置</button>
        </div>
        <div class="btm-btn">
          <!-- <button class="btm-btn-left" @click="random(4)">智能生成</button> -->
          <button class="btm-btn-right" @click="Reset(4)">重置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import fromSelect from "@/components/newIndex/models/FromSelect.vue";
import fromPopup from "@/components/newIndex/models/FromPopup.vue";
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: "",
  components: {
    fromSelect,
    fromPopup,
  },
  props: {
    editModel: String,
  },
  data() {
    return {
      HideValues: true,
      HideValues2: true,
      HideValues3: true,
      HideValues4: true,
      editArr: [],
      sele: "sele",
      inp: "inp",
      title: "模块",
      Completed: true,
      CompletedTwo: true,
      CompletedThree: true,
      CompletedFour: true,
      optionList: [
        { name: "安装" },
        { name: "标定" },
        { name: "协议解读" },
        { name: "应用" },
      ],
      titleSystem: "系统",
      optionListSystem: [{ name: "毫米波雷达" }, { name: "双目相机" }],
      titleModel: "型号",
      optionListModel: [{ name: "大陆ARS408" }, { name: "长江5号" }],
      titleWeight: "权重",
      optionListCont: [{ name: "未设置" }],
      task: [{}, {}, {}, {}],
      dataList: [
        { title: "项目一" },
        { title: "项目二" },
        { title: "项目三" },
        { title: "项目四" },
      ],
      seTypes: "",
      contentList: [
        {
          Title: "项目一",
          Section: "安装",
          System: "毫米波雷达",
          Type: "大陆ARS408",
          Weight: null,
          Settings: {},
        },
        {
          Title: "项目二",
          Section: "标定",
          System: "毫米波雷达",
          Type: "大陆ARS408",
          Weight: null,
          Settings: {},
        },
        {
          Title: "项目三",
          Section: "协议解读",
          System: "毫米波雷达",
          Type: "大陆ARS408",
          Weight: null,
          Settings: {},
        },
        {
          Title: "项目四",
          Section: "应用",
          System: "双目相机",
          Type: "长江5号",
          Weight: null,
          Settings: {},
        },
      ],
    };
  },
  created() {
    this.edit();
    this.deleBtn(1)
    this.deleBtn(2)
  },
  methods: {
    // 删除
    deleBtn(val) {
      this.$emit("del");
      if (val == 1) {
        this.HideValues = false;
        this.contentList.forEach((item, index) => {
          if (item.Title == "项目一") {
            delete this.contentList[index];
            // this.contentList.splice(index, 1);
          }
        });
      }
      if (val == 2) {
        this.HideValues2 = false;
        this.contentList.forEach((item, index) => {
          if (item.Title == "项目二") {
            delete this.contentList[index];
            // this.contentList.splice(index, 1);
          }
        });
      }
      if (val == 3) {
        this.HideValues3 = false;
        this.contentList.forEach((item, index) => {
          if (item.Title == "项目三") {
            delete this.contentList[index];
            // this.contentList.splice(index, 1);
          }
        });
      }
      if (val == 4) {
        this.HideValues4 = false;
        this.contentList.forEach((item, index) => {
          if (item.Title == "项目四") {
            delete this.contentList[index];
            // this.contentList.splice(index, 1);
          }
        });
      }
    },
    edit() {
      if (this.editModel != "") {
        this.editArr = JSON.parse(this.editModel);
        this.editArr.forEach((item, index) => {
          if (item.Title == "项目一") {
            this.contentList[0].Weight = this.editArr[index].Weight;
            this.Completed = false;
          }
          if (item.Title == "项目二") {
            this.contentList[1].Weight = this.editArr[index].Weight;
            this.CompletedTwo = false;
          }
          if (item.Title == "项目三") {
            this.contentList[2].Weight = this.editArr[index].Weight;
            this.CompletedThree = false;
          }
          if (item.Title == "项目四") {
            this.contentList[3].Weight = this.editArr[index].Weight;
            this.CompletedFour = false;
          }
        });
        // this.contentList[0].Weight = this.editArr[0].Weight;
        // this.contentList[1].Weight = this.editArr[1].Weight;
        // this.contentList[2].Weight = this.editArr[2].Weight;
        // this.contentList[3].Weight = this.editArr[3].Weight;
      }
    },
    // 随机数据
    random(index) {
      if (index == 1) {
        this.Res1();
        // this.contentList[0].Weight = Math.floor(Math.random() * (70 - 30)) + 30;
        this.contentList[0].Weight = 100;
        let types = Math.floor(Math.random() * (4 - 1)) + 1;
        if (types == 1) {
          let EchoList = [1];
          sessionStorage.setItem("EchoList", JSON.stringify(EchoList));
        } else if (types == 2) {
          let EchoListTwo = [1, 0];
          sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
        } else if (types == 3) {
          let EchoList = [1];
          sessionStorage.setItem("EchoList", JSON.stringify(EchoList));
          let EchoListTwo = [1];
          sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
        }
        this.Completed = false;
      }
      if (index == 2) {
        this.Res2();
        // this.contentList[1].Weight = Math.floor(Math.random() * (70 - 30)) + 30;
        this.contentList[1].Weight = 100;
        let types = Math.floor(Math.random() * (3 - 1)) + 1;
        let PN = Number((Math.random() * (1 - 2)).toFixed(1));
        let PN2 = Number((Math.random() * (1 - 2)).toFixed(1));
        let PN3 = Number((Math.random() * (1 - 2)).toFixed(1));
        let AN = Number((Math.random() * (3 - 6)).toFixed(2));
        let AN2 = Number((Math.random() * (3 - 6)).toFixed(2));
        let AN3 = Number((Math.random() * (3 - 6)).toFixed(2));
        if (types == 1) {
          let Calibration = {
            AxisCenter: 0,
            Position: [PN, PN2, PN3],
            Angle: [AN, AN2, AN3],
          };
          sessionStorage.setItem(
            "CalibrationList",
            JSON.stringify(Calibration)
          );
        } else if (types == 2) {
          let Calibration = {
            AxisCenter: 1,
            Position: [PN, PN2, PN3],
            Angle: [AN, AN2, AN3],
          };
          sessionStorage.setItem(
            "CalibrationList",
            JSON.stringify(Calibration)
          );
        }
        this.CompletedTwo = false;
      }
      if (index == 3) {
        this.Res3();
        // this.contentList[2].Weight = Math.floor(Math.random() * (70 - 30)) + 30;
        this.contentList[2].Weight = 100;
        let types = Math.floor(Math.random() * (6 - 1)) + 1;
        if (types == 1) {
          let NewProtocol = [
            {
              Id: 0x201,
              Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
              Properties: [
                "RadarState_MaxDistanceCfg",
                "RadarState_OutputTypeCfg",
              ],
            },
            {
              Id: 0x60a,
              Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
              Properties: ["Object_NofObjects", "Object_MeasCounter"],
            },
            {
              Id: 0x60d,
              Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
              Properties: ["Object_ArelLong", "Object_Length"],
            },
          ];
          sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
        } else if (types == 2) {
          let NewProtocol = [
            {
              Id: 0x201,
              Properties: ["RadarState_OutputTypeCfg"],
              Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
            },
            {
              Id: 0x60a,
              Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
              Properties: ["Object_NofObjects", "Object_MeasCounter"],
            },
            {
              Id: 0x60d,
              Properties: ["Object_ArelLong", "Object_Length"],
              Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
            },
          ];
          sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
        } else if (types == 3) {
          let NewProtocol = [
            {
              Id: 0x201,
              Properties: ["RadarState_MaxDistanceCfg"],
              Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
            },
            {
              Id: 0x60a,
              Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
              Properties: ["Object_NofObjects", "Object_MeasCounter"],
            },
            {
              Id: 0x60d,
              Properties: ["Object_ArelLong", "Object_Width"],
              Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
            },
          ];
          sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
        } else if (types == 4) {
          let NewProtocol = [
            {
              Id: 0x201,
              Properties: ["RadarState_MaxDistanceCfg"],
              Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
            },
            {
              Id: 0x60a,
              Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
              Properties: ["Object_NofObjects", "Object_MeasCounter"],
            },
            {
              Id: 0x60d,
              Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
              Properties: ["Object_ArelLong", "Object_Length", "Object_Width"],
            },
          ];
          sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
        } else if (types == 5) {
          let NewProtocol = [
            {
              Id: 0x201,
              Data: [0x40, 0x1d, 0x40, 0x00, 0x00, 0x34, 0x00, 0x00],
              Properties: [
                "RadarState_MaxDistanceCfg",
                "RadarState_OutputTypeCfg",
              ],
            },
            {
              Id: 0x60a,
              Data: [0x07, 0x6f, 0x53, 0x10, 0x00, 0x00, 0x00, 0x00],
              Properties: ["Object_NofObjects", "Object_MeasCounter"],
            },
            {
              Id: 0x60d,
              Data: [0x01, 0x7d, 0x0f, 0xa0, 0x70, 0x80, 0x19, 0x05],
              Properties: [
                "Object_ArelLong",
                "Object_ArelLat",
                "Object_Length",
                "Object_Width",
              ],
            },
          ];
          sessionStorage.setItem("AgreementList", JSON.stringify(NewProtocol));
        }
        this.CompletedThree = false;
      }
      if (index == 4) {
        this.Res4();
        // this.contentList[3].Weight = Math.floor(Math.random() * (70 - 30)) + 30;
        this.contentList[3].Weight = 100;
        let types = Math.floor(Math.random() * (4 - 1)) + 1;
        if (types == 1) {
          let data = { Id: 0 };
          sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
        } else if (types == 2) {
          let data = { Id: 1 };
          sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
        } else if (types == 3) {
          let data = { Id: 2 };
          sessionStorage.setItem("LaneDetectList", JSON.stringify(data));
        }
        this.CompletedFour = false;
      }
    },

    openModel(index) {
      if (this.task[index] == "安装") {
        this.$emit("detailsMethod", 1);
      } else if (this.task[index] == "标定") {
        this.$emit("detailsMethod", 2);
      } else if (this.task[index] == "协议解读") {
        this.$emit("detailsMethod", 3);
      } else if (this.task[index] == "应用") {
        this.$emit("detailsMethod", 4);
      }
    },
    ShowModel(index) {
      this.$emit("detailsMethod", index);
    },
    seleVal(data) {
      this.task[this.seTypes] = data;
    },
    seleTypes(index) {
      this.seTypes = index;
    },
    // 确定提交
    ok() {
      this.$emit("ok", this.contentList);
    },
    // 内容按钮改变
    changeBtn(index) {
      if (index == 1) {
        this.Completed = false;
      } else if (index == 2) {
        this.CompletedTwo = false;
      } else if (index == 3) {
        this.CompletedThree = false;
      } else if (index == 4) {
        this.CompletedFour = false;
      }
    },
    Res1() {
      this.Completed = true;
      this.contentList[0].Weight = null;
      let EchoList = [];
      sessionStorage.setItem("EchoList", JSON.stringify(EchoList));
      let EchoListTwo = [];
      sessionStorage.setItem("EchoListTwo", JSON.stringify(EchoListTwo));
    },
    Res2() {
      this.CompletedTwo = true;
      this.contentList[1].Weight = null;
      let newArr = { AxisCenter: 0, Position: [0, 0, 0], Angle: [0, 0, 0] };
      sessionStorage.setItem("CalibrationList", JSON.stringify(newArr));
    },
    Res3() {
      this.CompletedThree = true;
      this.contentList[2].Weight = null;
      let NewAgreementList = [];
      sessionStorage.setItem("AgreementList", JSON.stringify(NewAgreementList));
    },
    Res4() {
      let NewLaneDetectList = { Id: 0 };
      sessionStorage.setItem(
        "LaneDetectList",
        JSON.stringify(NewLaneDetectList)
      );

      this.CompletedFour = true;
      this.contentList[3].Weight = null;
    },
    // 重置
    Reset(index) {
      ElMessage({
        message: "已重置！",
        type: "success",
      });
      if (index == 1) {
        this.Res1();
      } else if (index == 2) {
        this.Res2();
      } else if (index == 3) {
        this.Res3();
      } else if (index == 4) {
        this.Res4();
      } else if (index == 9) {
        this.Res1();
        this.Res2();
        this.Res3();
        this.Res4();
      }
    },
  },
});
</script>

<style lang="less" scoped>
.wp-box {
  height: 590px;
  overflow: hidden;
}
.box {
  float: left;
  width: 304px;
  height: 544px;
  border-radius: 10px;
  border: 1px solid #dadbde;
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 10px;
}
.title {
  width: 100%;
  height: 67px;
  border-bottom: 1px solid #f0f1f5;
  margin-bottom: 29px;
  text-align: left;
  position: relative;
}
.title span {
  font-size: 18px;
  color: #1b1b1d;
  line-height: 67px;
  font-weight: 500;
  padding-left: 20px;
}
.img-del {
  position: absolute;
  top: 21px;
  right: 20px;
  width: 25px;
  height: 25px;
}
.content {
  display: flex;
  padding-left: 20px;
  margin-top: 20px;
}
.list-left {
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
  color: #81859c;
  padding-right: 10px;
}
.list-select {
  width: 210px;
  height: 40px;
  user-select: none;
  border: 1px solid #c0c2cd;
  outline: none;
  padding-left: 6px;
}
.list-inp {
  width: 198px;
  height: 38px;
  border: 1px solid #c0c2cd;
  outline: none;
  padding-left: 10px;
}

.bottomBox {
  padding-left: 20px;
  margin-top: 20px;
  text-align: left;
  border-top: 1px solid #f0f1f5;
}
.bottom-left {
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
  color: #81859c;
  padding-right: 10px;
  padding-top: 20px;
}
.bottom-select {
  width: 264px;
  height: 40px;
  user-select: none;
  border: 1px solid #c0c2cd;
  outline: none;
  padding-left: 10px;
}
.btm-btn-left {
  width: 120px;
  height: 40px;
  background: linear-gradient(270deg, #e9f4fc 0%, #f2f2fc 100%);
  border-radius: 10px;
  outline: none;
  border: none;
  font-weight: 400;
  color: #5984e0;
  font-size: 16px;
  margin-top: 20px;
}
.btm-btn-right {
  width: 120px;
  height: 40px;
  background: #f2f2f5;
  border-radius: 10px;
  border: none;
  font-weight: 400;
  color: #81859c;
  font-size: 16px;
  margin-left: 74px;
  margin-top: 20px;
}
.SetUpBtn {
  width: 264px;
  height: 40px;
  border: 1px solid #e6e7eb;
  font-size: 18px;
  outline: none;
  color: #bdbdbe;
}
.ComBtn {
  width: 264px;
  height: 40px;
  border: 1px solid #c0c2cd;
  font-size: 18px;
  outline: none;
  background-color: #fff;
  color: #1b1b1d;
}
</style>